<template>
  <div class="top-bar">
    <div class="location">当前位置：{{ city }}</div>

    <!-- 绘图工具下拉 -->
    <el-dropdown @command="handleDrawCommand">
      <span class="el-dropdown-link">
        绘图工具<i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item command="LineString">直线</el-dropdown-item>
          <el-dropdown-item command="Polygon">多边形</el-dropdown-item>
          <el-dropdown-item command="Circle">圆形</el-dropdown-item>
          <el-dropdown-item command="Freehand">自由画笔</el-dropdown-item>
          <!-- 新增 -->
          <el-dropdown-item command="clear">删除绘制</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>

    <!-- 标记工具下拉 -->
    <el-dropdown @command="handleMarkerCommand">
      <span class="el-dropdown-link">
        标记工具<i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item command="parking">停车场</el-dropdown-item>
          <el-dropdown-item command="charging">充电站</el-dropdown-item>
          <el-dropdown-item command="bus">公交站</el-dropdown-item>
          <el-dropdown-item command="exit">出口标记</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script>
import { ref, onMounted } from "vue";
import { fetchCityData } from "../utils/api"; // 引入 api.js 中的获取城市数据的函数

export default {
  name: "TopBar",
  emits: ["drawCommand", "markerCommand"], // 添加新的事件
  setup(_, { emit }) {
    const city = ref("定位中...");

    const getCity = async () => {
      try {
        const data = await fetchCityData(); // 从 api.js 获取城市数据
        city.value = data.city; // 更新 city 状态
      } catch (error) {
        city.value = "定位失败";
      }
    };

    const handleDrawCommand = (command) => {
      emit("drawCommand", command);
    };

    const handleMarkerCommand = (command) => {
      emit("markerCommand", command); // 触发标记事件
    };

    onMounted(() => {
      getCity(); // 在组件挂载时调用获取城市的函数
    });

    return {
      city,
      handleDrawCommand,
      handleMarkerCommand,
    };
  },
};
</script>

<style>
.top-bar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 10px;
  background: #f5f5f5;
}
.location {
  font-size: 16px;
}
</style>
